<template>
  <div class="popField-container">
    <van-field v-model.trim="inputComment" class="post-field" center type="textarea" rows="2" autosize show-word-limit
      maxlength="50" placeholder="请输入留言" clearable />
    <van-button class="btn" size="small" type="default" :disabled="!inputComment.length" @click="onComment">发布
    </van-button>
  </div>
</template>

<script>
// 导入接口
import { addComment } from '@/api/comment.js'
export default {
  props: {
    articleId: {
      type: [Object, Number, String],
      default: null
    },
    target: {
      type: [Object, Number, String],
      require: true
    }
  },
  name: 'pop-field',
  data () {
    return {
      // 发布评论内容
      inputComment: ''
    }
  },
  methods: {
    async onComment () {
      // 输入框不能为空
      if (!this.inputComment.length) return

      this.$toast.loading({
        duration: 0, // 持续展示toast
        message: '发布中',
        forbidclick: 'true' // 禁止点击背景
      })

      try {
        const { data: res } = await addComment({
          // 要求id为文章或评论id   则通过路由传参获取
          // target: this.target + '',
          target: this.articleId,
          content: this.inputComment,
          art_id: this.articleId ? this.articleId + '' : this.articleId
        })
        console.log(res)
        res.data.new_obj.is_liking = false
        // 发布评论
        this.inputComment = ''
        this.$emit('postComment', res)
        this.$toast('发布成功')
      } catch (err) {
        this.$toast('发布失败，请重试')
      }
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () { },
  mounted () { }
}
</script>

<style lang='less' scoped>
.popField-container {
  display: flex;
  padding: 32px 0 32px 32px;
  align-items: center;
  .post-field {
    background-color: #f5f7f9;
  }
  .btn {
    width: 150px;
    border: none;
    padding: none;
    font-size: 28px;
    color: #6ba3d8;
  }
}
</style>
